<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('预约房间详情')" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-roomInfo-reserve" th:object="${roomInfo}">
            <input type="hidden" name="roomId" th:value="${roomInfo.id}"/>
            <div class="form-group">
                <label class="col-sm-3 control-label">房间图片：</label>
                <div class="col-sm-8">
                    <div class="image-container">
                        <img th:src="${roomInfo.roomPicture}" alt="房间图片" class="img-responsive room-image" style="width: 500px; height: 500px;">
                        <!-- 模态框 -->
                        <div id="imageModal" class="modal">
                            <span class="close">&times;</span>
                            <img class="modal-content" id="modalImage">
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">房间信息：</label>
                <div class="col-sm-8">
                    <p class="form-control-static" th:text="${roomInfo.roomType + ' ~ ' + roomInfo.area + '㎡'}"></p>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">租金类型：</label>
                <div class="col-sm-8">
                    <p class="form-control-static" th:text="${roomInfo.rentType == 'monthly' ? '月租' : (roomInfo.rentType == 'quarterly' ? '季度' : '年租')}"></p>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">房东联系方式：</label>
                <div class="col-sm-8">
                    <p class="form-control-static" th:text="${roomInfo.hostPhone}"></p>
                </div>
            </div>

            <!-- 10/15 日期 -->
            <div class="form-group">
                <label class="col-sm-3 control-label">预约开始日期：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input name="startDate" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">预约结束日期：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input name="endDate" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                    </div>
                </div>
            </div>

            <!-- 10/16 -->
            <div class="row">
                <div class="col-sm-offset-5 col-sm-10">
                    <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>点我预约</button>&nbsp;
                    
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js"/>
    <th:block th:include="include :: datetimepicker-js" />
    <script type="text/javascript">
        var prefix = ctx + "room/roomInfo";
        $("#form-reserve").validate({
            focusCleanup: true
        });

        // 10/15 日期
        $(function() {
            var today = new Date();

            $("input[name='startDate']").datetimepicker({
                format: "yyyy-mm-dd",
                minView: "month",
                autoclose: true,
                startDate: today,
                todayBtn: true,
                todayHighlight: true,
                language: 'zh-CN'
            }).on('changeDate', function(selected) {
                var minDate = new Date(selected.date.valueOf());
                $("input[name='endDate']").datetimepicker('setStartDate', minDate);

                 // 设置结束日期为开始日期的后一天
                var endDate = new Date(minDate);
                endDate.setDate(endDate.getDate() + 3);
                $("input[name='endDate']").datetimepicker('setDate', endDate);
            });

            $("input[name='endDate']").datetimepicker({
                format: "yyyy-mm-dd",
                minView: "month",
                autoclose: true,
                startDate: today
            });

            $("input[name='startDate']").datetimepicker('setDate', today);
            var defaultEndDate = new Date(today);
            defaultEndDate.setDate(today.getDate() + 3);
            $("input[name='endDate']").datetimepicker('setDate', defaultEndDate);
        });




        
        // function submitHandler() {
        //     if ($.validate.form()) {
        //         $.operate.save(prefix + "/reserve", $('#form-roomInfo-reserve').serialize());
        //     }
        // }


        // 转换日期格式
        function formatDate(dateString) {
            var parts = dateString.split('-');
            return parts[0] + '-' + ('0' + parts[1]).slice(-2) + '-' + ('0' + parts[2]).slice(-2);
        }
        console.log("Sending request with startDate:", startDate, "and endDate:", endDate);
        // 10/16 预约
        function submitHandler() {
            if ($.validate.form()) {
                var startDate = $("input[name='startDate']").val();
                var endDate = $("input[name='endDate']").val();

                var dateRegex = /^\d{4}-\d{2}-\d{2}$/;
                if (!dateRegex.test(startDate) || !dateRegex.test(endDate)) {
                    $.modal.alertError("日期格式不正确，请使用 yyyy-MM-dd 格式");
                    return;
                }

                // 格式化日期
                startDate = formatDate(startDate);
                endDate = formatDate(endDate);
            
                var roomId = $("input[name='roomId']").val();
            
                $.ajax({
                    url: prefix + "/reserve",
                    type: "POST",
                    data: {
                        roomId: roomId,
                        startDate: startDate,
                        endDate: endDate
                    },
                    dataType: "json",
                    success: function(result) {
                        if (result.code == web_status.SUCCESS) {
                            $.modal.alertSuccess(result.msg);
                            $.modal.close();
                            $.table.refresh();
                        } else {
                            $.modal.alertError(result.msg);
                        }
                    },
                    error: function() {
                        $.modal.alertError("系统错误");
                    }
                });
            }
        }

        var img = document.querySelector('.room-image');
        var modal = document.getElementById('imageModal');
        var modalImg = document.getElementById("modalImage");
        var span = document.getElementsByClassName("close")[0]
        // 点击图片时打开模态框
        img.onclick = function() {
            modal.style.display = "block";
            modalImg.src = this.src;
        }
        // 点击 <span> (x) 关闭模态框
        span.onclick = function() {
            modal.style.display = "none";
        }
        // 在模态框外点击时关闭它
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.9);
        }

        .modal-content {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
        }

        .close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
        }

        .close:hover,
        .close:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</body>
</html>